<template>
  <div class="nav-bar">
    <van-nav-bar
      v-if="leftBack"
      :title="title"
      left-text="返回"
      :right-text="rightText"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-nav-bar
      v-if="!leftBack"
      :title="title"
      :right-text="rightText"
      :fixed="true"
      @click-right="onClickRight"
    >
      <template #right v-if="iconName">
        <van-icon :name="iconName" size="22"/>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    leftBack: Boolean,
    rightText: String,
    iconName: String
  },
  methods: {
    onClickLeft() {
      onBackPressed();
      this.$emit("clickLeft");
    },
    onClickRight() {
      this.$emit("clickRight");
    }
  }
};
</script>
<style scoped>
.nav-bar {
  z-index: 99;
  position: relative;
  height: 46px;
}
.van-nav-bar {
  background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
}
.van-nav-bar >>> .van-nav-bar__title {
  color: white;
  font-size: 18px;
}
.van-nav-bar__right {
  font-size: 1.8rem;
}
.van-nav-bar__text {
  color: white;
}
.van-nav-bar .van-icon {
  color: white;
}
.van-nav-bar__text:active {
  color: gray;
  background-color: #4a90e2;
}
.van-icon:active {
  color: gray;
  background-color: #4a90e2;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
</style>